<template>
  <div class="app-container" >
    <div class="boxfirst" style="font-size: 20px">
      <el-divider content-position="left" style="font-size: 100px" >系统历史离店客人清单</el-divider>
    </div>
    <template>

      <!--中间主体部分-->
      <div class=“boxsecond” style="border:1px solid rgb(255,255,255)">
        <div class="main">
          <el-table :data="detailsList":header-cell-style="{textAlign:'center',fontSize: '18px',background:'#eef1f6',color:'#606266'}"
                    :cell-style="{textAlign: 'center'}" height="700" border style="width: 100%">

            <el-table-column prop="handBrand" label="手牌号" width="100" fontSize="" ></el-table-column>
            <el-table-column prop="handState" label="手牌状态" width="180"></el-table-column>
            <el-table-column prop="userName" label="录单员" width="120"></el-table-column>
            <el-table-column prop="entryName" label="购买商品" width="180"></el-table-column>
            <el-table-column prop="consumptionStatus" label="消费状态" width="120">
              <template slot-scope="scope">
                <span v-if="scope.row.consumptionStatus==0" class="status">正常</span>
                <span v-if="scope.row.consumptionStatus==1" class="status">退单</span>
              </template>
            </el-table-column>
            <el-table-column prop="front_sign" label="退单时间" width="180"></el-table-column>
            <el-table-column prop="cardiner" label="退单处理人账号" width="120"></el-table-column>
            <el-table-column prop="checkout"  label="退单处理人姓名" width="120"></el-table-column>
            <el-table-column prop="department" label="录单员工号" width="120"></el-table-column>
            <el-table-column prop="checkout_time" label="录单员姓名" width="180"></el-table-column>
            <el-table-column prop="note1" label="退单操作" >
              <template slot-scope="scope">
                <el-button v-if ="scope.row.consumptionStatus==0" type="danger" plain @click="handleUpdate(scope.row)">退单</el-button>
              </template>

            </el-table-column>
          </el-table>
        </div>
        <br>
      </div>
      <!-- 添加或修改人员基础信息对话框 -->
      <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
        <el-form ref="form" :model="form" :rules="rules" label-width="80px">
          <el-form-item label="用户ID" prop="userId">
            <el-input v-model="form.userId" placeholder="请输入用户ID" />
          </el-form-item>
          <el-form-item label="部门ID" prop="deptId">
            <el-input v-model="form.deptId" placeholder="请输入部门ID" />
          </el-form-item>
          <el-form-item label="用户昵称" prop="nickName">
            <el-input v-model="form.nickName" placeholder="请输入用户昵称" />
          </el-form-item>
          <el-form-item label="用户账号" prop="userName">
            <el-input v-model="form.userName" placeholder="请输入用户账号" />
          </el-form-item>
          <el-form-item label="身份证号" prop="idNumber">
            <el-input v-model="form.idNumber" placeholder="请输入身份证号" />
          </el-form-item>
          <el-form-item label="性别" prop="sex">
            <el-select v-model="form.sex" placeholder="请选择性别">
              <el-option
                v-for="dict in dict.type.sys_user_sex"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="手机号" prop="phone">
            <el-input v-model="form.phone" placeholder="请输入手机号" />
          </el-form-item>
          <el-form-item label="职务" prop="post">
            <el-select v-model="form.post" placeholder="请选择职务">
              <el-option
                v-for="dict in dict.type.yqg_post"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="部门" prop="department">
            <el-select v-model="form.department" placeholder="请选择部门">
              <el-option
                v-for="dict in dict.type.yqg_department"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="人员状态" prop="personnelStatus">
            <el-select v-model="form.personnelStatus" placeholder="请选择人员状态">
              <el-option
                v-for="dict in dict.type.yqg_personnel_status"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="备注1" prop="note1">
            <el-input v-model="form.note1" placeholder="请输入备注1" />
          </el-form-item>
          <el-form-item label="备注2" prop="note2">
            <el-input v-model="form.note2" placeholder="请输入备注2" />
          </el-form-item>
          <el-form-item label="备注3" prop="note3">
            <el-input v-model="form.note3" placeholder="请输入备注3" />
          </el-form-item>
          <el-form-item label="备注4" prop="note4">
            <el-input v-model="form.note4" placeholder="请输入备注4" />
          </el-form-item>
          <el-form-item label="备注5" prop="note5">
            <el-input v-model="form.note5" placeholder="请输入备注5" />
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </el-dialog>
    </template>


  </div>

</template>

<pagination
  v-show="total>0"
  :total="total"
  :page.sync="queryParams.pageNum"
  :limit.sync="queryParams.pageSize"
  @pagination="getList"
/>




<script>
  import { listDetails, getDetails, delDetails, addDetails, updateDetails } from "@/api/module/shao/details";
  import { listProject, getProject, delProject, addProject, updateProject } from "@/api/module/shao/project";
  import { listHands, getHands, delHands, addHands, updateHands } from "@/api/module/shao/hands";
  import { listBaseinfo, getBaseinfo, delBaseinfo, addBaseinfo, updateBaseinfo } from "@/api/module/shao/baseinfo";

  export default {
    name: "index1",
    dicts: ['yinhe_demo'],
    data() {
      return {
        input1: '',
        input2: '',
        input3: '',
        input4: '',
        formInline: {
          user: '',
          region: ''
        },
        // 遮罩层
        loading: true,
        // 选中数组
        ids: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 显示搜索条件
        showSearch: true,
        // 总条数
        total: 0,
        // 消费详细表格数据
        detailsList: [],
        // 弹出层标题
        title: "",
        // 是否显示弹出层
        open: false,

        // 查询消费详细表参数
        consumptiondetail: {
          pageNum: 1,
          pageSize: 100,
          userId: null,
          deptId: null,
          department: null,
          nickName: null,
          userName: null,
          post: null,
          handBrand: null,
          handCategory: null,
          handState: null,
          retentionStatus: null,
          mergeStatus: null,
          openingTime: null,
          drawTime: null,
          mergeHands: null,
          mergeBarBillsId: null,
          leaveTime: null,
          beforeLeave: null,
          beforeBarBillsId: null,
          entryName: null,
          projectCategory: null,
          projectCode: null,
          mnemonicCode: null,
          unit: null,
          unitPrice: null,
          commissionPrice: null,
          together: null,
          sailingsSigns: null,
          barBillsId: null,
          recordingTime: null,
          quantity: null,
          totalAmount: null,
          seat: null,
          orderNumber: null,
          paymentMethod: null,
          consumptionStatus: null,
          chargebackTime: null,
          reasonForChargeback: null,
          chargebackProcessorAccount: null,
          chargebackProcessorName: null,
          clockTime: null,
          nextClockTime: null,
          nextClockStatus: null,
          recordEmployeeNumber: null,
          recorderEmployeeName: null,
          roomType: null,
          openingHours: null,
          checkOutTime: null,
          checkOutStatus: null,
          note1: null,
          note2: null,
          note3: null,
          note4: null,
          note5: null,
          note6: null,
          note7: null,
          note8: null,
          note9: null,
          note10: null
        },
        // 表单参数
        form: {},
        // 表单校验
        rules: {},

        activeIndex: '1',
        activeIndex2: '1'
      };
    },

    created() {
      this.getdetailsList();
    },
    /** methods: {
    cellStyle(row,column,rowIndex,columnIndex){//根据报警级别显示颜色
      // console.log(row);
      // console.log(row.column);
      if(row.column.label==="分级"&& row.row.level==="二级"){
        return 'color:#0CB618'
      }else if(row.column.label==="告警级别"&& row.row.alarmLevel==="一般告警" ){
        return 'color:yellow'
      }
    }
  },
     */
    methods:{
    // 查询项目信息表
    getdetailsList() {
      this.loading = true;
      listDetails(this.consumptiondetail).then(response => {
        this.detailsList = response.rows;
        console.log(this.detailsList);
        this.total = response.total;
        this.loading = false;
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        pageNum: 1,
        pageSize: 10,
        hand_brand: null,
        opening_time: null,
        group_id: null,
        cardiner: null,
        checkout: null,
        department: null,
        checkout_time: null,
        front_sign: null,
        front_print_time: null,
        operator: null,
        checkout_location: null,
        graduationSchool: null,
        note1: null,
        /** ID: null,
         USERNAME: null,
         BIRTH: null,
         GENDER: null,
         AGE: null,
         idNumber: null,
         PHONE: null,
         nativePlace: null,
         BIRTHPLACE: null,
         NATION: null,
         highestEducation: null,
         highestDegree: null,
         graduationSchool: null,
         MAJOR: null,
         POLITICS: null,
         RESUME: null,
         userId: null,
         deptId: null,
         createBy: null,
         createTime: null,
         updateBy: null,
         updateTime: null,
         NOTE: null,
         NOTE1: null,
         NOTE2: null,
         NOTE3: null,
         NOTE4: null,
         NOTE5: null,
         NOTE6: null,
         NOTE7: null,
         NOTE8: null,
         NOTE9: null,
         NOTE10: null */
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 获取生日按钮操作
     handleInput() {
    var shenfenzheng;
    shenfenzheng= this.queryParams.idNumber;
    var year = shenfenzheng.substring(6, 10);// 截取年
    var month = shenfenzheng.substring(10, 12);// 截取月份
    var day = shenfenzheng.substring(12, 14);// 截取天
    this.queryParams.BIRTH=year+'-'+month+'-'+day;


  },*/

    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length!==1
      this.multiple = !selection.length
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "添加基本信息";
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      console.log(this.form);
      const id = row.id || this.ids;
      getDetails(id).then(response => {
        this.form = response.data;

        this.open = true;
        this.title = "修改基本信息";
      });
    },
    /** 退单按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.id != null) {
            this.form.consumptionStatus=1;
            updateDetails(this.form).then(response => {
              this.$modal.msgSuccess("退单成功");
              this.open = false;
              this.getdetailsList();
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.ids;
      this.$modal.confirm('是否确认删除基本信息编号为"' + ids + '"的数据项？').then(function() {
        return delBaseinfo(ids);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {});
    },
    handleView(row) {
      const id = row.id;
      this.$router.push({ path:"/Ruoyi-Cloud/zzyxx", query: {id}});
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download('project/baseinfo/export', {
        ...this.queryParams
      }, `baseinfo_${new Date().getTime()}.xlsx`)
    }
  }};
</script>

<style >
  /*
  .el-tabs__item{color:red ;}
  */
  .app-container{
    border: 10px;
  }
  #tab-fourth{
    color: red;
  }
  #tab-fifth{
    color: #dada25;
  }
  #tab-sixth{
    color: green;
  }
  #tab-seventh{
    color: orange;
  }
  /* 样式穿透，修改组件库组件的样式 */
  .el-tabs__item.is-top.is-active {
    /* v-bind可以绑定变量 */
    background-color: rgba(231, 226, 226, 0.77);
  }
  .status{
    color: #00afff;
  }


  .boxfirst{
    width: 100%;
    height: 40px;
  }
  .boxsecond{
    width: 100%;

  }
  .ruzhen {
    position: absolute;

  }

</style>

